<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="keywords" content="JS代码,焦点图,JS广告代码,JS特效代码" />
<meta name="description" content="CSS3+jQuery手机天气预报效果，属于站长常用代码，更多焦点图代码请访问一流素材网JS代码频道。" />
<title>天气预报</title>
<link type="text/css" href="style.css" rel="stylesheet" />
    <script src="/js/jquery/jquery.min.js"></script>
    <script src="jquery-1.7.min.js" type="text/javascript" ></script>
    <script src="/js/plugins/jrender/jrender.js"></script>
    <script src="common.js" type="text/javascript"></script>
</head>
<body>

<div id="mainBody">
    <div id="cloud1" class="cloud"></div>
    <div id="cloud2" class="cloud"></div>
</div>

<div id="weather"><img src="images/cloud.png" width="300"/></div>

<table cellspacing="0" id="foreach">
        <thead>
                 <tr>
                     <td style="border-top-left-radius:10px;">
                         <div class="paraLeft" id="local">当地天气</div>
                         <div class="paraLeft" id="city"></div>
                         <div class="paraLeft" id="hour">天气预报</div>
                     </td>
                     <td>&nbsp;</td>
                     <!--当前温度-->
                     <td style="border-top-right-radius:10px;"><div id="temper"></div></td>
                 </tr>
        </thead>

        <tbody render-loop="future">

                <tr >
                     <td align="left"><span style="font-size: 17px">星期1</span> </td>
                    <td align="center"><img src="images/sunshine_0.png"/></td>

                    <td align="right"><span render-html="future.temperature" style="font-size:17px"></span></td>

                </tr>

        </tbody>


        <tfoot>
                 <tr>
                     <td style="border-bottom-left-radius:10px;">
                     <div class="paraLeft" id="update">更新于</div>
                     </td>
                     <td><span id="time1"></span></td>
                     <td  style="border-bottom-right-radius:10px;"><span id="time2"></span></td>
                 </tr>
        </tfoot>

</table>


</div>


<script>
    $(function () {
        var url = '/data/weather';
        $.ajax(url, {
            data: {
                'city': '广州'
            },
            scriptCharset: 'utf-8',
            dataType: 'json',
            success: function (data) {
                console.log(data);
                $("#city").html(data.result.city)
                $("#temper").html(data.result.realtime.temperature)

                $("#foreach").renderValues(data.result);

                console.log(data.result.future);
            }
        });
    })


</script>
</body>




</html>
